<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的操作</title>
</head>
<body>
昵称：<input type="text" name="name"><br>
真实姓名：<input type="text" name="trueName"><br>
身份证：<input type="text" name="cardId"><br>
邮箱：<input type="text" name="email"><br>
电话号码：<input type="text" name="telephone"><br>
QQ号码：<input type="text" name="qqId"><br>
账户密码：<input type="text" name="pwd"><br>
问题：<input type="text" name="question"><br>
答案：<input type="text" name="answer"><br>
状态：<input type="text" name="state"><br>
<table id="mytable" border="1">
    <tr>
        <td>昵称</td>
        <td>姓名</td>
        <td>身份证</td>
        <td>邮箱</td>
        <td>电话号码</td>
        <td>QQ</td>
        <td>密码</td>
        <td>注册时间</td>
        <td>问题</td>
        <td>回答</td>
        <td>状态</td>
        <td>操作</td>
        <td><input type="checkbox"></td>
    </tr>
</table>
<input type="button" id="delBtn" value="删除用户">
<input type="button" id="addBtn" value="新增用户">
<input type="button" id="updateBtn" value="修改用户">
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        function get_Notices() {
            $.ajax({
                type:"get",
                url:"http://localhost:9527/classwork_Web_exploded/selectNotice",
                success:function (res) {
                    if(res.code==1) {
                        var list = res.data;
                        list.forEach(function (obj, index) {
                            var tr = $("<tr></tr>");
                            var td1 = $("<td>"+obj.name+"</td>");
                            var td2 = $("<td>"+obj.trueName+"</td>");
                            var td3 = $("<td>"+obj.cardId+"</td>");
                            var td4 = $("<td>"+obj.email+"</td>");
                            var td5 = $("<td>"+obj.telephone+"</td>");
                            var td6 = $("<td>"+obj.qqId+"</td>");
                            var td7 = $("<td>"+obj.pwd+"</td>");
                            var td8 = $("<td>"+obj.regTime+"</td>");
                            var td9 = $("<td>"+obj.question+"</td>");
                            var td10 = $("<td>"+obj.answer+"</td>");
                            var td11 = $("<td>"+obj.state+"</td>");
                            var td12 = $("<td><button>修改</button></td>")
                            var td13 = $("<td><input type='checkbox' data-id='"+obj.id+"' class='removeUser'></td>")
                            tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7).append(td8).append(td9).append(td10).append(td11).append(td12).append(td13).appendTo("#mytable");
                        });
                    }else{
                        alert(res.massage);
                    }
                },fail:function (res) {
                    alert("系统异常")
                }
            })
        }
        get_Notices()
        $("#delBtn").click(function () {
            //确认框confirm
            var  flag = confirm("您确定要删除该记录吗？");
            if (flag) {
                //拿到所有checkbox
                //循环判断所有check中选择check
                //取出选择check属性id
                //.each专门遍历obj节点
                var ids = "";
                $(".removeUser").each(function (obj) {
                    if ($(this).is(":checked")) {
                        ids += $(this).attr("data-id") + ",";
                    }
                });
                ids = ids.substring(0, ids.length - 1);
                $.ajax({
                    type: "post",
                    data: {"ids": ids},
                    url: "http://localhost:9527/classwork_Web_exploded/DelNotice",
                    success: function (res) {
                        if (res.code == 1) {
                            alert(res.massage);
                            location.reload();
                        } else {
                            alert(res.massage);
                        }
                    }
                })
            }
        })
        $("#addBtn").click(function () {
            var name=$("[name='name']").val();
            var trueName=$("[name='trueName']").val();
            var cardId=$("[name='cardId']").val();
            var email=$("[name='email']").val();
            var telephone=$("[name='telephone']").val();
            var qqId=$("[name='qqId']").val();
            var pwd=$("[name='pwd']").val();
            var question=$("[name='question']").val();
            var answer=$("[name='answer']").val();
            var state=$("[name='state']").val();
            $.ajax({
                type:"post",
                url:"http://localhost:9527/classwork_Web_exploded/AddUser",
                data:{"name":name,"trueName":trueName,"cardId":cardId,"email":email,"telephone":telephone,"qqId":qqId,"pwd":pwd,
                    "question":question,"answer":answer,"state":state },
                success:function (res) {
                    if (res.code==1){
                        alert(res.massage)
                        location.reload();
                    }else {
                        alert(res.massage)
                    }
                }
            })
        })
        $("#updateBtn").click(function () {
            //确认框confirm
            var  flag = confirm("您确定要修改该记录吗？");
            if (flag) {
                //拿到所有checkbox
                //循环判断所有check中选择check
                //取出选择check属性id
                //.each专门遍历obj节点
                var ids = "";
                $(".removeUser").each(function (obj) {
                    if ($(this).is(":checked")) {
                        ids += $(this).attr("data-id") + ",";
                    }
                });
                ids = ids.substring(0, ids.length - 1);
                var name=$("[name='name']").val();
                var trueName=$("[name='trueName']").val();
                var cardId=$("[name='cardId']").val();
                var email=$("[name='email']").val();
                var telephone=$("[name='telephone']").val();
                var qqId=$("[name='qqId']").val();
                var pwd=$("[name='pwd']").val();
                var question=$("[name='question']").val();
                var answer=$("[name='answer']").val();
                var state=$("[name='state']").val();
                $.ajax({
                    type:"post",
                    url:"http://localhost:9527/classwork_Web_exploded/UpdateUser",
                    data:{"ids":ids,"name":name,"trueName":trueName,"cardId":cardId,"email":email,"telephone":telephone,"qqId":qqId,"pwd":pwd,
                        "question":question,"answer":answer,"state":state },
                    success:function (res) {
                        if (res.code==1){
                            alert(res.massage)
                            location.reload();
                        }else {
                            alert(res.massage)
                        }
                    }
                })
            }
        })
    })
</script>
</body>
</html>
</body>
</html>